<!DOCTYPE html>
<html>
<head>
    <title>Semi-circle with charge distribution</title>
</head>
<body>
    <canvas id="physicsCanvas" width="300" height="250"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define geometric parameters
        const centerX = canvas.width / 2;
        const centerY = 200;
        const radius = 100;
        const theta = Math.PI / 4.5; // Angle in radians, ~40 degrees

        // Style for text labels
        ctx.font = 'bold 20px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 1. Draw the thick semi-circular arc
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, Math.PI, 2 * Math.PI, false);
        ctx.lineWidth = 4;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        // 2. Draw the center point P
        ctx.beginPath();
        ctx.arc(centerX, centerY, 3, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.fillText('P', centerX - 20, centerY + 5);

        // 3. Draw the vertical dashed line
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1.5;
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(centerX, centerY - radius);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid lines

        // 4. Draw the radius line R
        const endX = centerX + radius * Math.cos(-Math.PI / 2 + theta);
        const endY = centerY + radius * Math.sin(-Math.PI / 2 + theta);
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(endX, endY);
        ctx.stroke();

        // 5. Draw the angle arc for theta
        const angleArcRadius = 35;
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.arc(centerX, centerY, angleArcRadius, -Math.PI / 2, -Math.PI / 2 + theta, false);
        ctx.stroke();

        // 6. Add labels for R and theta
        // Label R
        const R_label_pos_x = centerX + (radius / 2 + 10) * Math.cos(-Math.PI / 2 + theta * 1.2);
        const R_label_pos_y = centerY + (radius / 2 + 10) * Math.sin(-Math.PI / 2 + theta * 1.2);
        ctx.fillText('R', R_label_pos_x, R_label_pos_y);

        // Label theta
        const theta_label_radius = angleArcRadius - 15;
        const theta_label_x = centerX + theta_label_radius * Math.cos(-Math.PI / 2 + theta / 2);
        const theta_label_y = centerY + theta_label_radius * Math.sin(-Math.PI / 2 + theta / 2);
        ctx.fillText('θ', theta_label_x, theta_label_y);

    </script>
</body>
</html>